<template>
    <div>
        <div class="edits">
            <div>
                智能渔方详情
            </div>
            <div>
                <el-button class="back" icon="el-icon-arrow-left" type="primary" @click="go">返回</el-button>
            </div>
        </div>
        <div style="width: 100%;">
            <div class="fish-box">
                <el-form ref="fishInfo" :model="fishInfo" label-width="105px">
        <el-form-item label="智能渔方图片  :" style="display: flex; align-items: center;    ">
          <img :src="fishInfo.fishPartyImg" style="width: 100px; height: 100px; margin-left: -50%; vertical-align: middle;" alt="">
        </el-form-item>
        <el-form-item label="智能渔方编号  :">
            <el-input v-model="fishInfo.serialNo"  disabled></el-input>
        </el-form-item>
        <el-form-item label="起租日期  :">
          <el-input v-model="fishInfo.effectiveDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="到期日期  :">
          <el-input v-model="fishInfo.expirationDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="智能渔方名称  :">
          <el-input v-model="fishInfo.fishPartyName" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属用户ID  :">
          <el-input v-model="fishInfo.userId" disabled></el-input>
        </el-form-item>
        <el-form-item label="智能渔方属性  :">
          <span style="padding: 0 17px;">{{ fishInfo.homeLiveFlag == 0 ? '私域' : '公域' }}</span>
        </el-form-item>
        <el-form-item label="设备号  :">
            <el-input v-model="fishInfo.monitorNo" disabled></el-input>
        </el-form-item>
        <el-form-item label="设备密码  :">
            <el-input v-model="fishInfo.monitorPwd" disabled></el-input>
        </el-form-item>
        <el-form-item label="租赁属性  :" >
          <span v-if="fishInfo.attribute == 1" style="padding: 0 17px;">赁3年获得40000元人民币</span>
          <span v-if="fishInfo.attribute == 2" style="padding: 0 17px;">租赁3年鱼获自行处理</span>
          <span v-if="fishInfo.attribute == 3" style="padding: 0 17px;">租赁3年获得2400斤鱼</span>
        </el-form-item>
      </el-form>
              
             

            </div>
        </div>
        <div style="width: 54%;">

            <div class="fish">
              
                <div class="fish-boxs">
                 
                    <div style="margin-top: -280px; display: flex;">
                        <div>
                        <img style="height: 25px; width: 20px;" src="../../../assets/images/fishInfo.png" alt="" />
                    </div>
                    <div class="fish-info">
                        鱼苗信息
                    </div>
                    </div>


                    <div class="sprout-box" v-for="item in fishInfo.fryList" :key="item.index">
                        <div class="fish-sprout">

                            <div style="margin-right: 10px; "><img style="width: 300px; height: 150px;" :src="item.fryImag" alt=""></div>
                            <div style="font-size: 35px;">
                                <div>{{ item.fryName }}</div>
                                <div style="margin-top: 25px;">
                                    <div>已养{{ item.launchedDay }}天</div>
                                <div><img style="width: 10px; height: 10px;" src="../../../assets/images/bo.png"
                                        alt="">{{ item.currentFryWeight }}斤</div>
                                </div>
                           
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { FishParty } from '@/api/user'
export default {
    data() {
        return {
            fishPartyId: '', //渔方ID
            orderId: '', //订单ID
            fishInfo: {}, // 渔方信息
        }
    },
    created() {
        this.fishPartyId = this.$route.query.fishPartyId
        this.orderId = this.$route.query.orderId
        this.FishParty()
    },
    methods: {
        // 返回
        go(){
            this.$router.go(-1)
        },
        async FishParty() {
            let data = {
                fishPartyId: this.fishPartyId,
                orderId: this.orderId
            }
            let result = await FishParty(data)
            if (result.code == 0) {
                this.fishInfo = result.data

            }
        }
    }
}
</script>

<style lang="scss" scoped>


::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #F5F7FA;
    border-color: #E4E7ED;
    color: #070707;
    cursor: not-allowed;
}
.edits{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background-color: #f3f3f3;
}
// .back{
//     width: 50px;
//     height: 20px;
//     line-height: 20px;
//     text-align: center;
// }
.fish-sprout {
    border: 1px solid #ccc;
    width: 500px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fish {
    border: 1px solid #ccc;
    width: 98%;
    height: 350px;
    margin: 30px 24px;
}

.fish-info {
    margin-left: 5px;
    height: 25px;
}
.sprout-box{
display: flex;
    align-items: center;
    margin: 50px 20px;
}
.fish-boxs {
    display: flex;
    align-items: center;
    margin: 36px 15px;
}

.fish-box {
    display: flex;
    margin: 30px 24px;
    width: 98%;
}

.portait-table {
    border-collapse: collapse;
    border: none;
    width: 100%;

    td {
        border: 1px solid #F3F3F3;
        height: 40px;
        padding-left: 10px;
        color: #333;

        &:nth-child(odd) {
            background: #f9fafc;
            color: #454545;
        }
    }

    .edit {
        border: 1px solid #ccc;
        width: 180px;
    }

    .edit-img {

        width: 180px;
        height: 50px;

    }
}
</style>